<!-- 个人中心：支持装修 -->
<template>
	<s-layout title="我的" tabbar="/pages/index/user" navbar="custom" :bgStyle="template.page"
		:navbarStyle="template.navigationBar" onShareAppMessage>
		<s-block v-for="(item, index) in template.components" :key="index" :styles="item.property.style" v-if="token">
			<view class="points-wrap" v-if="index == 1">
				<view class="points">
					<view class="points-left">
						<text>{{pointsData?.voucherPrice || 0}}</text>
						<text>抵用卷余额</text>
					</view>
					<view class="points-left">
						<text>{{pointsData?.unEffectiveVoucherPrice || 0}}</text>
						<text>未生效抵用卷</text>
					</view>
					<view class="points-left">
						<text>{{pointsData?.rebatePoints || 0}}</text>
						<text>我的积分</text>
					</view>
				</view>
			</view>
			<view v-if="index == 2">
				<image class="bar-code" src="/static/tx.png" mode="scaleToFill" />
			</view>
			<s-block-item :type="item.id" :data="item.property" :styles="item.property.style" />
		</s-block>
		<Unlisted v-else />
	</s-layout>
</template>

<script setup>
	import {
		computed,
		ref
	} from 'vue';
	import Unlisted from './components/unlisted'
	import {
		onShow,
		onPageScroll,
		onPullDownRefresh
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	import BrokerageApi from '@/sheep/api/trade/brokerage';
	import {
		BrokerageTypeEnum
	} from '@/sheep/util/const';
	import {
		fen2yuan
	} from '@/sheep/hooks/useGoods';

	const pointsData = ref()
	const template = ref({})
	const token = ref(uni.getStorageSync('token'))

	// 隐藏原生tabBar
	uni.hideTabBar();

	const templateMixed = () => {
		const userData = sheep.$store('app').template.user
		if (pointsData.value) {
			userData.components = userData.components.map((item, index) => {
				// if (index == 1) {
				// 	item.property.list[0].title = fen2yuan(pointsData.value?.brokeragePrice) || 0
				// }
				if (index == 2) {
					if (pointsData.value?.isApplyDL) {
						item.property.list[2].title = '代理端'

					}
					if (pointsData.value?.isApplySW) {
						item.property.list[3].title = '商务端'
					}
				}
				return item
			})
		}
		template.value = userData
	}
	const isLogin = computed(() => sheep.$store('user').isLogin);

	const getInfo = async () => {
		const {
			data: pointsDataDL
		} = await BrokerageApi.getBrokerageUserApplyInfo({
			applyType: BrokerageTypeEnum.DL.type
		})
		const {
			data: pointsDataSW
		} = await BrokerageApi.getBrokerageUserApplyInfo({
			applyType: BrokerageTypeEnum.SW.type
		})
		pointsData.value = {
			unEffectiveVoucherPrice: fen2yuan(pointsDataSW.unEffectiveVoucherPrice),
			voucherPrice: fen2yuan(pointsDataSW.voucherPrice),
			rebatePoints: pointsDataSW.rebatePoints,
			brokeragePrice: pointsDataSW.brokeragePrice,
			isApplyDL: pointsDataDL.isApply,
			isApplySW: pointsDataSW.isApply,
		}

		templateMixed()
	}

	onShow(() => {
		if (token.value) {
			getInfo()
		}
	});

	onPullDownRefresh(() => {
		getInfo()
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 800);
	});

	onPageScroll(() => {});
</script>

<style scoped lang="scss">
	.points-wrap {
		width: 100%;
		padding-bottom: 15rpx;
		background-color: #F5F5F5;
		overflow: hidden;
		box-sizing: border-box;

		.points {
			width: 100%;
			border-radius: 8rpx;
			background-color: #fff;
			padding: 40rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;

			.points-left {
				display: flex;
				flex-direction: column;
				gap: 10rpx;
				text-align: center;
				font-size: 36rpx;

				:nth-child(2) {
					color: #999;
					font-size: 24rpx;
				}
			}
		}
	}

	.bar-code {
		width: 100%;
		height: 200rpx;
	}
</style>